<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>fluid - portable application framework</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="fluid - portable application framework | examples" />
	<meta name="language" content="en-US" />
	<meta name="domain" content="http://fluidjs.vikasburman.com" />
	<meta name="author" content="Vikas Burman" />
	<meta name="copyright" content="Copyright (c) 2012-2013, Vikas Burman, all rights reserved." />
    <script src="res/jquery.min.js"></script>
    <script src="res/bootstrap.min.js"></script>
	<link href="res/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
	<script type="text/javascript">
		// default onready
		$(function() {
			$("#preferFSOHelp").popover();
			$("#packageTypeHelp").popover();
			$("#navHelp").popover();
			$("#readyMadeTodoList").popover();
		});
		
		// open example file - considering current package selection
		function openExample(path, isSkipPackageTypeProcessing) {
			// build url
			var url = path;
			var isAdded = false;
			if (!isSkipPackageTypeProcessing) {
				var packageType = $("#packageType")[0].selectedIndex;
				switch(packageType) {
					case 0:
						// no change in url
						break;
					case 1:
						// add dynamic fluidOption override
						url += "?simulatePackage=kernel";
						isAdded = true;
						break;
					case 2:
						url += "?simulatePackage=core";
						isAdded = true;
						break;
				};
			} else {
				isAdded = true; // already added
			};
			
			// FSO
			var userAgent = window.navigator.userAgent.toLowerCase();
			var isIE = /msie/.test(userAgent) && !/opera/.test(userAgent);			
			if (isIE && $("#preferFSO")[0].checked) {
				if (isAdded) {
					url += "&fileSystemDriversCustomOrder=fso,fsa";
				} else {
					url += "?fileSystemDriversCustomOrder=fso,fsa";
				};
			};
			
			// open
			window.open(url, "_blank");
		};
	</script>
    <link href="res/bootstrap-responsive.min.css" rel="stylesheet">
	<link href="res/styles.css" rel="stylesheet">
	
	<link rel="shortcut icon" href="res/img/fluid.png">
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://fluidjs.codeplex.com" target="_blank">fluid</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              <a href="http://fluidjs.vikasburman.com" class="navbar-link" target="_blank">More</a>
            </p>
            <ul class="nav">
              <li><a href="res/about.html">About</a></li>
              <li class="active"><a href="#">Examples</a></li>
              <li><a href="http://fluidjs.codeplex.com/documentation" target="_blank">Documentation</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
			<div align="center">
				<img src="res/fluid-big-examples.png">
			</div>
			<ul class="muted">
			<li>Updated for <em>v 0.2.134</em></li>
			<li><img id="packageTypeHelp" data-trigger="hover" data-placement="right" data-html="true" data-toggle="popover" 
										data-title="Simulate Package" 	
										data-content="Choose 'Kernel' or 'Core' to simulate these packahes.<br />
										It will skip loading all plugins and features which are not part of chosen 
										package.<br /><br />When choose anything other than 'None', note the URL 
										of examples, this shows how dynamic values for a fluidOption can be provided." 
										src="res/info.gif" /> 
				Simulate
			<select id="packageType" class="muted span5">
			  <option>None</option>
			  <option>Kernel</option>
			  <option>Core</option>
			</select>
			</li>
			<li><img id="preferFSOHelp" data-trigger="hover" data-placement="right" data-html="true" data-toggle="popover" 
										data-title="Prefer FSO in IE" 
										data-content="If checked, it will try to use FileSystemObject based IO driver in IE. 
										In that case Java Runtime would not be required, though IE security setting 
										<b>Initialize and Scripe ActiveX controls not marked as safe for scripting</b> 
										would require to be <b>enabled</b> for this to work properly. <br /><br />
										<img src='res/IE-settings-for-FSO.png'><br /><br />When checked and running in IE, 
										note the URL of examples, this shows how dynamic values for a fluidOption can 
										be provided." 
										src="res/info.gif" /> 
				<input type="checkbox" id="preferFSO">Prefer FSO on IE</input>
			</li>
			</ul>
			<img style="float:right" id="navHelp" data-trigger="hover" data-placement="bottom" data-html="true" data-toggle="popover" 
										data-container="body" data-title="Where to start?" 
										data-content="If you are coming here for the first time or want to see *all* examples, explore 
										them in listed order below (left). <br /><br />
										If you are following examples in every version, look for <img src='res/new.gif' /> 
										graphic to see what's new since last version.<br /><br />
										If you are just looking for some featured or new examples, 
										start exploring them in right section."
										src="res/where-to-start.png" /> 
			<hr>
            <ul class="nav nav-list">
              <li class="nav-header">A. Basic</li>
              <li><a href="#" onclick="openExample('basic/hello-world/app-hello-world.html');" title="It works!">01 Hello, World!</a></li>
              <li><a href="#" onclick="openExample('basic/plugins/app-plugins.html');" title="Basic building blocks.">02 Plugins</a></li>
              <li><a href="#" onclick="openExample('basic/features/app-features.html');" title="Ultimate extendability.">03 Features</a></li>
              <li><a href="#" onclick="openExample('basic/application/app-plugin.html');" title="Centralized control.">04 Application</a></li>
              <li class="nav-header">B. Conceptual</li>
              <li><a href="#" onclick="openExample('conceptual/session/app-session.html');" title="In-browser session management.">01 Session</a></li>
              <li><a href="#" onclick="openExample('conceptual/state/app-state.html')" title="In-browser state management.">02 State</a></li>
              <li><a href="#" onclick="openExample('conceptual/include/app-include.html')" title="Dependencies inclusion.">03 File Include</a></li>
              <li><a href="#" onclick="openExample('conceptual/events/app-events.html')" title="Loose coupling instrument.">04 Events</a></li>
              <li><a href="#" onclick="openExample('conceptual/pages/app-pages.html')" title="Navigatable user interface.">05 Pages <img src="res/new.gif" /></a></li>
              <li class="nav-header">C. Real-World</li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
			<h1>Hello, World!</h1>
			<p>As the name suggests, it showcases the most basic execution of the framework. Just 
			 referring to the framework JS, system gears up and greets you.</p>
			<p><a href="#" onclick="openExample('basic/hello-world/app-hello-world.html');" class="btn btn-primary btn-large">Go Play &raquo;</a></p>
          </div>

		  <div class="row-fluid">
			<div class="span4">
				<h2>Plugins</h2>
				Framework kernel is very simple; besides having required infrastructure code, all 
				it has is necessary glue to extend itself. Everything else is a plugin. Entire framework 
				is built using a set of core plugins.
				<br /><br />				
				<p><a class="btn" href="#" onclick="openExample('basic/plugins/app-plugins.html');">Open &raquo;</a></p>
            </div><!--/span-->
			<div class="span4">
				<h2>Features</h2>
				What plugins are to framework, features are to plugins. Essentially it means that plugins can be extended using features. In contrast to 
				plugins, which always gets added to framework core (<span class="object">$f</span> object); 
				features can be added to one or more plugins, framework core or even to other features as well. 
				<br />
				Unlike plugins, which always have their own object, features get merged into target object seamlessly.
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('basic/features/app-features.html');">Open &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
				<h2>Application</h2>
				App plugin is a special plugin and provides a central place to organize application object.
				It provides various application life-cycle events for customized processing. This is always
				available via <span class="object">$f.app</span> object. Even if you don't define your custom
				version, an inbuilt default is loaded, unless specifically turned off.
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('basic/application/app-plugin.html');">Open &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->		
		  
		  <br /><br />
          
		  <div class="row-fluid">
            <div class="span4">
				<h2>Session</h2>
				Framework provides several structured approaches to manage assorted data items. One such approach 
				is to store client-side session items. Client-side session can store JSON serializable objects across page 
				refresh in a browser without any type of server connectivity or data transfer.
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('conceptual/session/app-session.html');">Open &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
				<h2>State</h2>
				Another structured approach to manage data items on client-side is state. State is 
				very much like session but implemented differently and is designed to do more structured 
				and heavy lifting for storing objects across page refresh in a browser. 
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('conceptual/state/app-state.html');">Open &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
				<h2>File Include</h2>
				No application can be created in a single file, nor all files should be loaded in one go. This
				creates dependencies which are required for a particular piece of functionality to work. 
				With <span class="object">include</span> support, each plugin can define a list of all 
				its dependencies, and these are loaded in specified order before the plugin is initialized. 
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('conceptual/include/app-include.html');">Open &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->

		  <br /><br />
          
		  <div class="row-fluid">
            <div class="span4">
				<h2>Events</h2>
				Publishing an event and reacting to it by subscribers is the standard programming model to
				communicate across known/unknown components of an application. Framework provides a clean
				approach to define and raise (fire) events and also to define event handlers (subscribers).
				All with a simple <span class="object">events</span> structure.
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('conceptual/events/app-events.html');">Open &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
				<h2>Pages <img src="res/new.gif" /></h2>
				Applications do need user interface. As in case of a web application, here also a user interface 
				is called a page; yet unlike a web page which is UI centric, this page is behavior centric. At any given point in time there is only one page
				that is active and this can be accessed via <span class="object">$f.page</span>. Yes, you guessed 
				it right, a page is also a plugin, like everything else.  
				<br /><br />
				<p><a class="btn" href="#" onclick="openExample('conceptual/pages/app-pages.html');">Open &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
		  
        </div><!--/span-->
      </div><!--/row-->
      
	  <hr>

      <footer>
        <p align="center">Copyright &copy; 2012-2013, Vikas Burman, all rights reserved.</p>
      </footer>

    </div><!--/.fluid-container-->
  </body>
</html>
